/*
 * @Author: shiguo
 * @Date: 2022-03-10 09:14:11
 * @LastEditors: shiguo
 * @LastEditTime: 2022-08-19 11:37:19
 * @FilePath: /taro-aks-lib/h5/WithLoadingContainer/index.tsx
 */
/// <reference path="index.d.ts" />


import * as React from 'react';
import { View, Image, Text } from "@tarojs/components";

// import { ViewProps } from '@tarojs/components/types/View'




export enum WithLoadingStatus {
    NONE = 'NONE',
    LOADING = 'LOADING',
    FAIL = 'FAIL',
    SUCCESS = 'SUCCESS',
    EMPTY = 'EMPTY',
    NOMORE = 'NOMORE',
}


export default (props: WithLoadingContainer.Prop) => {
    const {
        status = WithLoadingStatus.NONE,
        failComponent,
        emptyComponent,
        nomoreComponent,
        reload,
        failText = '网络请求失败，点击重新加载~',
        emptyText = '暂无数据',
        nomoreText = '没有更多数据了～',
    } = props


    const onClick = (e) => {
        e.stopPropagation();
        reload && reload()
    }

    return <View style={{ display: 'flex', flexDirection: 'column', flexGrow: 1, ...props.style }}>
        {(() => {
            switch (status) {
                case WithLoadingStatus.NONE:
                    return null;
                case WithLoadingStatus.SUCCESS:
                    return props.children;
                case WithLoadingStatus.LOADING:
                    return <Loading />;
                case WithLoadingStatus.FAIL:
                    if (failComponent) return failComponent
                    return <View onClick={onClick} style={styles.container}>
                        <Text style={styles.text}>{failText}</Text>
                    </View>;
                case WithLoadingStatus.EMPTY:
                    if (emptyComponent) return emptyComponent
                    return <View onClick={onClick} style={styles.container}>
                        <Text style={styles.text}>{emptyText}</Text>
                    </View>;
                case WithLoadingStatus.NOMORE:
                    return (
                        <>
                            {props.children}
                            {nomoreComponent ? nomoreComponent : <Text style={styles.text}>{nomoreText}</Text>}
                        </>
                    )
                default:
                    return <Text style={styles.text}>(^_^)∠※ 送你一束小花</Text>;

            }
        })()}
    </View>
}



const Loading = () => {
    return (
        <View style={styles.container}>
            <Image src={require('./loading3.gif')} style={{ width: '20px', height: '20px' }} mode='aspectFit' />
        </View>
    )
}


const styles: Record<string, React.CSSProperties> = {
    text: {
        lineHeight: '44px',
        color: '#999999',
        fontSize: '14px',
        textAlign: 'center',
    },
    container: {
        display: 'flex',
        height: '44px',
        justifyContent: 'center',
        alignItems: 'center',
    }
}
